<template>
    <NavBar />
    <el-main class="container">
        <router-view v-slot="{ Component }">
            <Transition name="fade" mode="out-in">
                <keep-alive>
                    <component :is="Component" :key="$route.path" v-if="$route.meta.keepAlive" />
                </keep-alive>
            </Transition>
            <Transition name="fade" mode="out-in">
                <component :is="Component" :key="$route.path" v-if="!$route.meta.keepAlive" />
            </Transition>
        </router-view>
    </el-main>
    <!-- <Footer /> -->
</template>

<script setup lang="ts">
    import NavBar from '@/components/NavBar.vue'
    import Footer from '@/components/Footer.vue'
    import { RouterLink, RouterView, useRoute } from 'vue-router';
    import { ref, onMounted, onUnmounted, onBeforeMount } from 'vue';
</script>

<style  scoped>
    .container {
        width: 85%;
        margin: auto;
        min-height: 80vh;
    }
</style>